<template>
  <view class="cu-modal" :class="{show:visible}"  >
    <view class="mask" @click="handleMaskClick"></view>
    <view class="cu-dialog">
      <view class="title" v-if="title">{{ title }}</view>
      <view class="content-wrapper" >
        <view class="icon-wrapper" v-if="icon">
          <text :class="`icon `+icon"></text>
        </view>
        <slot name="content" v-if="$slots.content"></slot>
        <scroll-view v-else class="content"  scroll-y >
            <template v-if="mode === 'text'">{{ dContent }}</template>
            <parser  v-else-if="mode === 'html'" :html="dContent"/>
        </scroll-view>
      </view>
      <view class=" action">
        <slot name="confirm" v-if="$slots.confirm"></slot>
        <template v-else>
          <template v-if="showCancel">
            <view class="btn cancel" @click="handleCancelClick">{{ cancelText }}</view>
            <view class="divider"></view>
          </template>
          <view class="btn confirm" @click="handleConfirmClick">{{ confirmText }}</view>
        </template>
      </view>
    </view>
  </view>

</template>

<script>
import Parser from "../jyf-parser/jyf-parser";
export default {
  name: "my-dialog",
    components: {Parser},
    data() {
    return {
      visible: false,
      dContent: this.content,

      resolve: null,
      reject: null,
    }
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    confirmText: {
      type: String,
      default: "确定",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    closeOnConfirm: {
      type: Boolean,
      default: true,
    },
    closeOnModalClick: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: ""
    },
    showCancel: {
      type: Boolean,
      default: false,
    },
      mode:{
          type: String,
          default: "text"
      }

  },
  methods: {
    show(content) {
      if (content) this.dContent = content
      this.visible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      });
    },
    close() {
      this.visible = false;
    },
    handleConfirmClick() {
      this.$emit("confirm")
      this.resolve();
      if (this.closeOnConfirm) this.close();
    },
    handleCancelClick() {
      this.$emit("cancel")
      this.close();
    },
    handleMaskClick() {
      if (this.closeOnModalClick) this.close();
    },
  },
  watch: {
    visible(val) {
      if (val) this.$emit("show")
      else this.$emit("close")
    }
  },
}
</script>

<style scoped lang='scss'>

.cu-modal {
  transform: scale(1);
  background-color: transparent;

  &.show {
    .mask {
      opacity: 1;
    }

    .cu-dialog {
      transform: scale(1);
    }
  }
}

.mask {
  transition: all .2s ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
}

.cu-dialog {
  transition: all .2s ease-in-out;
  background-color: white;
  border-radius: r(32px);
  transform: scale(.85);


  .title {
    font-size: r(42px);
    color: #303133;
    text-align: center;
    width: 100%;
    margin-top: r(42px);
  }

  .content-wrapper {
    padding: r(120px 100px);
    color: #242E42;
    font-size: r(42px);

    .icon-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .icon {
      width: r(180px);
      height: r(180px);
      font-size: r(130px);
      background-color: $primary-color;
      border-radius: 50%;
      font-weight: bold;
      color: white;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: r(50px);
    }

    .content{
      max-height: 50vh;
    }
  }
}

.action {
  display: flex;
  justify-content: center;
  border-top: 2px solid #EFEFF4;
  height: r(116px);

  .divider {
    width: 2px;
    background-color: #EFEFF4;
  }
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex: 1;
  height: 100%;
  font-size: r(34px);
  font-weight: 400;
  color: #C8C7CC;

  &.confirm {
    color: $primary-color;
  }
}
</style>